<template>
    <div class="register_container" style="width: 100%; height: 100vh; overflow: hidden">
<!--        <div style="width: 400px; margin: 100px auto">-->

        <div style="width: 400px;margin-left: 720px">
            <div style="font-size: 30px; text-align: center; padding:30px 0px 30px 73px;color: #eeeeee">欢迎注册</div>
            <el-form :model="form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item  prop="username" label="用户名:">
                    <el-input prefix-icon="el-icon-user-solid" v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码:">
                    <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password
                              placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="confirm" label="请确认密码:">
                    <el-input prefix-icon="el-icon-lock" v-model="form.confirm" show-password
                              placeholder="请再次输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="nickName" label="姓名:">
                    <el-input
                            placeholder="请输入姓名"
                            prefix-icon="el-icon-user-solid"
                            v-model="form.nickName" >
                    </el-input>
                </el-form-item>
                <el-form-item prop="phone" label="手机号:">
                    <el-input
                            placeholder="输入手机号"
                            prefix-icon="el-icon-phone"
                            v-model="form.phone" >
                    </el-input>
                </el-form-item>
                <el-form-item prop="idNumber" label="身份证号:">
                    <el-input
                            placeholder="输入身份证号"
                            prefix-icon="el-icon-postcard"
                            v-model="form.idNumber" >
                    </el-input>
                </el-form-item>
                <el-form-item prop="birth" label="出生日期:">
                    <el-date-picker
                            v-model="form.birth"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item prop="sex" label="性别:">
                    <el-select v-model="form.sex" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  prop="address" label="地区:">
                    <el-input prefix-icon="el-icon-position"
                              placeholder="请输入地区"
                              v-model="form.address" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 300px" type="primary" @click="register">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request";


    export default {
        name: "Register",
        data() {
            var checkPhone = (rule, value, callback) => {
                if (!this.validatePhoneNum(value)&&value!==null&&value!=='') {
                    callback(new Error('请输入正确的手机号！'));
                } else {
                    callback();
                }
            };
            var checkIdNumber = (rule, value, callback) => {
                if (!this.validateIdCardNum(value)&&value!==null&&value!=='') {
                    callback(new Error('请输入合法的身份证！'));
                } else {
                    callback();
                }
            }
            return {
                options: [{
                    value: '男',
                    label: '男'
                }, {
                    value: '女',
                    label: '女'
                }],
                form: {
                    username: '',
                    password: '',
                    confirm: '',
                    nickName:'',
                    phone: '',
                    idNumber: '',
                    birth: '',
                    sex: '',
                    address:'',
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                    confirm: [
                        {required: true, message: '请确认密码', trigger: 'blur'},
                    ],
                    nickName: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                    ],
                    phone: [
                        {required: true, validator: checkPhone, trigger: 'blur'}
                    ],
                    idNumber: [
                        {required: true, validator: checkIdNumber, trigger: 'blur'}
                    ],
                    birth:[
                        {required: true,message: '请选择出生日期',trigger: 'blur'}
                    ],
                    sex:[
                        {required: true,message: '请选择性别',trigger: 'blur'}
                    ]

                }
            }
        },
        methods: {
            register() {

                if (this.form.password !== this.form.confirm) {
                    this.$message({
                        type: "error",
                        message: '2次密码输入不一致！'
                    })
                    return
                }

                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        request.post("/user/register", this.form).then(res => {
                            if (res.code === '0') {
                                this.$message({
                                    type: "success",
                                    message: "注册成功"
                                })
                                this.$router.push("/login")  //登录成功之后进行页面的跳转，跳转到主页
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.msg
                                })
                            }
                        })
                    }
                })
            },
            /**
             * @desc 校验国内手机号是否合法
             * @param {String} phoneNum 手机号
             * @return {Boolean}
             */
            validatePhoneNum(phoneNum) {
                const reg = /^1[0-9]{10}$/
                return reg.test(phoneNum)
            },
            /**
             * @desc 校验身份证号是否合法
             * @param {String} idCardNum 18 位身份证号
             * @return {Boolean}
             */
            validateIdCardNum(idCardNum) {
                // 非法字符串
                if (typeof idCardNum !== 'string') return false
                // 所有身份证前两位代表的是地区
                const city = {
                    11: '北京',
                    12: '天津',
                    13: '河北',
                    14: '山西',
                    15: '内蒙古',
                    21: '辽宁',
                    22: '吉林',
                    23: '黑龙江 ',
                    31: '上海',
                    32: '江苏',
                    33: '浙江',
                    34: '安徽',
                    35: '福建',
                    36: '江西',
                    37: '山东',
                    41: '河南',
                    42: '湖北 ',
                    43: '湖南',
                    44: '广东',
                    45: '广西',
                    46: '海南',
                    50: '重庆',
                    51: '四川',
                    52: '贵州',
                    53: '云南',
                    54: '西藏 ',
                    61: '陕西',
                    62: '甘肃',
                    63: '青海',
                    64: '宁夏',
                    65: '新疆',
                    71: '台湾',
                    81: '香港',
                    82: '澳门',
                    91: '国外'
                }
                const birthday = idCardNum.substr(6, 4) + '/' + Number(idCardNum.substr(10, 2)) + '/' + Number(idCardNum.substr(12, 2))
                const d = new Date(birthday)
                const newBirthday = d.getFullYear() + '/' + Number(d.getMonth() + 1) + '/' + Number(d.getDate())
                const currentTime = new Date().getTime()
                const time = d.getTime()
                // 身份证系数列表
                const arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
                // 设定身份证通过相加运算得到值对应的身份证最后一位的列表
                const arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
                let sum = 0
                // 非法身份证
                if (!/^\d{17}(\d|x)$/i.test(idCardNum)) return false
                // 非法地区 非法地区
                if (city[idCardNum.substr(0, 2)] === undefined) return false
                // 非法生日
                if (time >= currentTime || birthday !== newBirthday) return false

                // 计算当前身份证最后一位的值
                for (let i = 0; i < 17; i++) {
                    sum += idCardNum.substr(i, 1) * arrInt[i]
                }
                const residue = arrCh[sum % 11]
                // 非法身份证哦
                if (residue !== idCardNum.substr(17, 1)) return false
                return true
            }

        }
    }
</script>

<style scoped>
    .register_container {
        background: url(../images/bg3.jpg) no-repeat;
        height: 100%;
        width: 100%;
        background-size: 100% 100%;
        background-attachment: fixed
    }
</style>
